updating a dropdown list from php/mysql after ajax enabled event

ok i have some php code embedded in my html that populates a dropdown list with entries from a mysql database.

now i need to think how i am going to repopulate that dropdown list [i.e pretty much rerun that segment of php code again to update the dropdown list] when an ajax event is submitted.

i have the ajax calls sorted for the mysql updates via php, but i cant think through the logic for how i am going to update that list after these other database updates/events have occured. [the dropdown list options need to change after these updates occur]

i am using the prototypejs library

i will post relevant sections of code..

   
   <script type="text/javascript">
	   function sendRequestClose() {
   
		   new Ajax.Request("sendmailclose.php", {
			   method: 'post',
		   postBody: "tradeID="+$F("tradeID")+"&closeprice="+$F("closeprice"),
				 
				onLoading: showLoading, //have to add alert
					
				onSuccess: function(transport){
				   var response = transport.responseText || "no response text";
				   alert("Success! \n\n" + response);
												   },
					
				  onFailure: function(){ alert('NO EMAILS SENT - NO RESPONSE FROM SERVER') },
												   
				 onComplete: hideLoading	}
	   
							   );
											   
		   }
   </script>
   ....
   
   <p>
	   CLOSE TRADE : 
	   <!-- PHP -->
	   <?php
	   // Make a MySQL Connection
	   mysql_connect("localhost", "ssss", "sssss")or die(mysql_error());
	   mysql_select_db("db")or die(mysql_error());		
	   $result = @mysql_query("SELECT ID,open_time,pair,open_price,LS FROM log_open");
   
	   print "<select name=\"tradeID\" id=\"tradeID\">";
	   while ($row = mysql_fetch_assoc($result)) {
		   $tradeID = $row['ID'];
		   $opentime = $row['open_time'];
		   $pair = $row['pair'];
		   $price = $row['open_price'];
			   if ($pair == "eu") {$price = round($price,4);} else {$price = round($price,2);}
		   $LS = $row['LS'];
		   print "<option value=$tradeID id=$tradeID>$tradeID $LS $pair $price $opentime";}
		   print "</select>";
		   ?>
	   price <input name="closeprice" id="closeprice" type="text" size ="7">
   
	   <input type="submit" value="CLOSE" name="submit" onClick="java script: sendRequestClose();"> 
   </p>

I essentially need that dropdown list to be recreated by running the same php code segment after the sendRequestClose javascript function is called [i.e the database is updated].

Can anyone explain or show me how i should go about this please? i am a relative newbie at this and i am struggling to work out where i start with this.

thanks for lookin. any commentary at all is welcome, cos i am pretty stuck here.

Out of random curiosity, why don't you just refresh the page? Is there some complex process that goes on before getting to the point where you click the button that you can't afford to lose? Or is it just that you would prefer to not have the page refresh (possibly for no other reason than AJAX is cool)?

Outside of that, my logic would probably invovle:
1. Moving the PHP in the code you provided to an external file, and replacing it with an include to the newly created file.
2. At the end of sendRequestClose(), either make another AJAX call to the newly created file, or simply place an include() to the new file at the end of sendmailclose.php, and save yourself an HTTP request.
3. Parse the result from #2's responseText, and replace the relavent HTML (i.e. innerHTML, or some more advanced DOM manipulation if you feel that adventurous).

THANKS RC26!!!

your comments really helped me think through my problem and i got it all fixed up.
ll include my code from my solution for the sake of completiveness.

Out of random curiosity, why don't you just refresh the page?

The html contains an inline webirc chat client. it doesmt make sense to navigate away. i could do it on a pop up window, but it just aids the flow of the site. imo.


Anyways relevant snippets of code.

<script type="text/javascript">
 function DLChange(newHTML){
	 document.getElementById('tradeID').innerHTML = newHTML;
		 }
 
 function sendRequestClose() {
 
	   new Ajax.Request("sendmailclose.php", {
			method: 'post',
			postBody: "tradeID="+$F("tradeID")+"&closeprice="+$F("closeprice"),
			   
			onLoading: showLoading, //have to add alert
				  
			onSuccess: function(transport){
					 var response = transport.responseText || "no response text";
					 var responder=response.split("<!-- DL -->");
 
					 alert("Success! \n\n" + responder[0]);
					 DLChange(responder[1]);
 
												 },
				  
			 onFailure: function(){ alert('NO EMAILS SENT - NO RESPONSE FROM SERVER') },
												 
			 onComplete: hideLoading	}
	 
							 );
											 
		 }
 </script>
 
 ....
 
 CLOSE TRADE : 
 <select name="tradeID" id="tradeID">
 <!-- PHP -->
	  <?php
	   include 'opentrades.php';
	   ?>

opentrades.php looks like this and is included at the bottom of my sendmailclose.php script.

<?php
		// Make a MySQL Connection
		mysql_connect("localhost", "ssss", "sssss")or die(mysql_error());
		mysql_select_db("db")or die(mysql_error());		
		$result = @mysql_query("SELECT ID,open_time,pair,open_price,LS FROM log_open");
		 print "<!-- DL -->";
		 while ($row = mysql_fetch_assoc($result)) {
			$tradeID = $row['ID'];
			$opentime = $row['open_time'];
			$pair = $row['pair'];
			$price = $row['open_price'];}
			$LS = $row['LS'];
			print "<option value=$tradeID id=$tradeID>$tradeID $LS $pair $price $opentime";}
			print "</select>";
			?>

maybe that might aid someone, somewhere one day.

thanks again.

Edited by fxr, 05 February 2009 - 04:44 AM.